<template>
  Users
  <el-table :data="UsersData" style="width: 100%">
    <el-table-column fixed prop="id" label="ID" width="150" />
    <el-table-column prop="name" label="Name" width="150" />
    <el-table-column prop="email" label="Email" width="200" />
    <el-table-column prop="phone" label="Phone" width="150" />
    <el-table-column prop="sex" label="Sex" width="100" />
    <el-table-column prop="address" label="Address" width="150" />
    <el-table-column prop="birth" label="Birth" width="200" />
    <el-table-column prop="signature" label="Signature" width="300" />
    <el-table-column fixed="right" prop="admin" label="Admin" width="65">
      <template #default="scope">
        <el-switch
          v-model="scope.row.admin"
          :active-value="true"
          @change="setAdmin($event, scope.row.id)"
        />
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="Edit" width="60">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="setUserInfo(scope.row)">Edit</el-button>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="Delete" width="65">
      <template #default="scope">
        <el-popconfirm title="确定要删除该用户吗?" @confirm="deleteUser(scope.row.id)">
          <template #reference>
           <el-button link type="danger" size="small">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <!-- 修改面板Dialog -->
  <el-dialog v-model="dialogVisible" title="Edit User">
    <el-form :model="editedUser" ref="userForm" label-width="100px">
      <el-form-item label="Name" prop="name">
        <el-input v-model="editedUser.name"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="editedUser.email"></el-input>
      </el-form-item>
      <el-form-item label="Phone" prop="phone">
        <el-input v-model="editedUser.phone"></el-input>
      </el-form-item>
      <el-form-item label="Sex" prop="sex">
        <el-input v-model="editedUser.sex"></el-input>
      </el-form-item>
      <el-form-item label="Address" prop="address">
        <el-input v-model="editedUser.address"></el-input>
      </el-form-item>
      <el-form-item label="Signature" prop="signature">
        <el-input v-model="editedUser.signature"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="saveUser">Save</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElNotification } from 'element-plus';
import { ref } from 'vue';
import { closeAccount, login, updateUserInfo } from '../../api/api';

// 用户信息表
const UsersData = ref([])
// setAdmin设置管理员
const setAdmin = (isAdmin, id) => {
  updateUserInfo(id, {admin: isAdmin}).then(response => {
    let msg = ''
    if (isAdmin) {
      msg = '已将 id：' + response.data.id + ' 设为管理员'
    } else {
      msg = '已撤销 id：' + response.data.id + ' 的管理员权限'
    }
    ElNotification({
      title: '设置成功',
      message: msg,
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '设置失败',
      message: error.message,
      type: 'error'
    })
  })
}
// 编辑面板显示
const dialogVisible = ref(false)
// 当前用户信息
const editedUser = ref({})
// 修改用户信息
const setUserInfo = (info) => {
  editedUser.value = { ...info }
  dialogVisible.value = true
}
// 保存修改
const saveUser = () => {
  updateUserInfo(editedUser.value.id, editedUser.value).then(response => {
    getUserData() // 从服务器重新获取用户信息表
    ElNotification({
      title: '修改成功',
      message: response.data.id + ' 信息已更新',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '修改失败',
      message: error.message,
      type: 'error'
    })
  })
  dialogVisible.value = false
}
// 删除用户
const deleteUser = (id) => {
  closeAccount(id).then(response => {
    getUserData() // 从服务器重新获取用户信息表
    ElNotification({
      title: '删除成功',
      message: id + ' 已删除',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '删除失败',
      message: error.message,
      type: 'error'
    })
  })
}

// 从服务器请求数据
const getUserData = () => {
  login('').then(response => {
    UsersData.value = response.data
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '从服务器获取数据失败',
      message: error.message,
      type: 'error'
    })
  })
}
getUserData()
</script>

<style scoped></style>